html,body{
    height: 100%;
}

@font-face{
    font-family: 'icon';
    src: url(../iconfont/iconfont.eot) format('eot'),
    url(../iconfont/iconfont.svg) format('svg'),
    url(../iconfont/iconfont.ttf) format('ttf'),
    url(../iconfont/iconfont.woff) format('woff');
}

.icon{
    font-family: 'icon';
}

@function vm($px){
    @return ($px / 750) * 100vw; 
}

.fl{
    float: left;
}

.fr{
    float: right;
}

.content{
    width: vm(688);
    margin: auto;
}

.all{
    height: 100%;
    display: flex;
    flex-direction: column;
    // background: #f4f4f4;
    .header{
        height: vm(102);
        .content{
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding-top: vm(20);
            .select{
                width: vm(100);
                height: vm(48);
                outline: none;
                option{
                    font-size: vm(24);
                }
            }
            .search{
                height: vm(60);
                width: vm(510);
                // display: inline-block;
                position: relative;
                
                i{
                    font-size: vm(24);
                    position: absolute;
                    left: vm(24);
                    top: vm(16);
                }
                .shuru{
                background: #f2f2f2;
                border: vm(1) solid #ccc;
                border-radius: vm(30);
                font-size: vm(26);
                line-height: vm(60);
                box-sizing: border-box;
                padding-left: vm(72);
                }
            }
            .hr{
                font-size:vm(36);
            }

        }
    }
    .main{
        flex: 1;
        height: calc(100% - vm(102) - vm(163) - vm(278));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .banner{
        width: 100%;
        height: vm(278);
        background: url(../images/yidong/tfcr-banner@2x.png) no-repeat center center;
        background-size: 100% 100%;
    }
        .content{
            display: flex;
            flex-direction: column;
            .nav{
                height: vm(300);
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                margin-top: vm(42);
                .nav1{
                    width: 19%;
                    height: vm(130);
                    background: url(../images/yidong/menu1.png) no-repeat top center;
                    background-size: vm(88) vm(88);
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    span{
                        font-size: vm(22);
                        text-align: center;
                    }
                }
                .nav2{
                    width: 19%;
                    height: vm(130);
                    background: url(../images/yidong/menu2.png) no-repeat top center;
                    background-size: vm(88) vm(88);
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    span{
                        font-size: vm(22);
                        text-align: center;
                    }
                }
                .nav3{
                    width: 19%;
                    height: vm(130);
                    background: url(../images/yidong/menu3.png) no-repeat top center;
                    background-size: vm(88) vm(88);
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    span{
                        font-size: vm(22);
                        text-align: center;
                    }
                }
            }
            .xiaoxi{
                height: vm(28);
                display: flex;
                justify-content: space-between;
                margin-top: vm(55);
                .xl{
                    display: flex;
                    justify-content: space-between;
                    span{
                        font-size: vm(22);
                        line-height: vm(28);
                    }
                    span:nth-child(1){
                        color: #eb4e49;
                    }
                }
                .xr{
                    font-size: vm(22);
                    color: #ccc;
                }
            }
            .rm{
                height: vm(488);
                display: flex;
                flex-direction: column; 
                justify-content: space-around;
                box-sizing: border-box;
                padding-top: vm(60);
                border-top: vm(1) solid #ccc;
                margin-top: vm(27);
                .rmt{
                    font-size: vm(40);
                    font-weight: 900;
                }
                .rmb{
                    height: vm(240);
                    display: flex;
                    display: -webkit-box;
                    overflow-x: auto;
                    -webkit-overflow-scrolling:touch;
                    .rmb1{
                        width: vm(644);
                        background: url(../images/yidong/banner2_bg@3x.png) no-repeat center center;
                        background-size: 100% 100%;
                        margin-right: vm(20);
                    }
                    .rmb2{
                        width: vm(644);
                        background: url(../images/yidong/banner3_bg@3x.png) no-repeat center center;
                        background-size: 100% 100%;
                    }
                }

            }
            .like{
                display: flex;
                flex-direction: column;
                .lt{
                    height: vm(40);
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    .ltl{
                        font-size: vm(40);
                        line-height: vm(40);
                        font-weight: 900;
                    }
                    .ltr{
                        width: vm(275);
                        display: flex;
                        justify-content: space-between;
                        span{
                            font-size: vm(24);
                        }
                        span:hover{
                            color: #de353c;
                        }
                    }
                }
                .lb{
                    display: flex;
                    flex-direction: column;
                    .lb1{
                        display: flex;
                        justify-content: space-between;
                        border-bottom: vm(1) solid #ccc;
                        box-sizing: border-box;
                        padding-bottom: vm(20);
                        margin-top: vm(40);
                        .lb1a{
                            width: vm(210);
                            height: vm(160);
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .lb1b{
                            height: vm(160);
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: flex-start;
                            .b1{
                                height: vm(30);
                                font-size: vm(30);
                                line-height: vm(30);
                                font-weight: 600;
                            }
                            .b2{
                                height: vm(20);
                                font-size: vm(20);
                                line-height: vm(20);
                                color: #9a9a9a;
                            }
                            .b3{
                                height: vm(30);
                                width: vm(310);
                                display: flex;
                                justify-content: space-between;
                                div:nth-child(1){
                                    width: vm(108);
                                    font-size: vm(18);
                                    line-height: vm(30);
                                    text-align: center;
                                    color: #c2483d;
                                    background: #ffecee;
                                }
                                div:nth-child(2){
                                    width: vm(108);
                                    font-size: vm(18);
                                    line-height: vm(30);
                                    text-align: center;
                                    color: #dcb250;
                                    background: #fff6ed;
                                }
                                div:nth-child(3){
                                    width: vm(108);
                                    font-size: vm(18);
                                    line-height: vm(30);
                                    text-align: center;
                                    color: #6fa6c5;
                                    background: #f0f7ff;
                                }
                            }
                            .b4{
                                width: vm(250);
                                height: vm(26);
                                display: flex;
                                justify-content: space-between;
                                align-items: baseline;
                                .b41{
                                    width: vm(80);
                                    display: flex;
                                    align-items: flex-end;
                                    span:nth-child(1){
                                        font-size: vm(26);
                                        font-weight: 600;
                                        color: #e13036;
                                    }
                                    span:nth-child(2){
                                        font-size: vm(18);
                                        color: #e13036;
                                    }
                                }
                                .b42{
                                    font-size: vm(18);
                                    line-height: vm(26);
                                    color: #ccc;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .footer{
        height: vm(163);
        background: #2f3130;
        color: #9f9f9f;
        .content{
            // width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .ft{
                height: vm(60);
                display: flex;
                justify-content: flex-start;
                border-bottom: vm(1) solid #ccc;
                li{
                    height: vm(20);
                    border-right:vm(1) solid #ccc;
                    box-sizing: border-box;
                    padding: vm(8); 
                    font-size: vm(18);
                    line-height: vm(20);
                    margin-top: vm(20);
                    display: flex;
                    align-items: center;
                }
            }
            .fb{
                height: vm(40);
                display: flex;
                justify-content: space-between;
                margin-top: vm(30);
                .fbl{
                    width: vm(220);
                    display: flex;
                    justify-content: space-between;
                    .fbll{
                        width: vm(100);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .tubiao{
                            font-size: vm(38);
                        }
                        .wenzi{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            span{
                                font-size: vm(16);
                            }
                        }
                    }
                }
                .fbr{
                    width: vm(400);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    // align-items: flex-end;
                    span{
                        font-size: vm(8);
                        line-height: vm(8);
                    }
                }
            }
        }
    }
}













